/*
产品库12-自购商品
*/
<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header>
      <el-button @click="handleAddUpdate()" v-repeatClick>批量操作商品</el-button>
      <el-button @click="handleBeforeUpdate" v-repeatClick>修改</el-button>
      <el-button @click="enabled(false)">禁用</el-button>
      <el-button @click="enabled(true)">启用</el-button>
      <el-button @click="selfbuyGoodsView" v-repeatClick>查看</el-button>
      <el-button @click="getSelfbuyGoods" v-repeatClick>刷新</el-button>
      <el-button type="danger" @click="delSelfbuyGoods" v-repeatClick>删除</el-button>
    </my-header>

    <!-- 列表区 -->
    <div style="flex: 1; margin-bottom: 10px">
      <div style="display: flex" class="content-height">
        <left-side @node-click="handleNodeClick" @cascade-list="handleCascadeList"></left-side>
        <el-card style="flex: 1; margin-left: 10px">
          <div class="app-page">
            <!-- 搜索区 -->
            <div class="content-flex">
              <el-form ref="search" :model="search" inline size="small">
                <el-form-item label="" prop="info">
                  <el-input
                    style="width: 300px"
                    placeholder="搜索:SUK编码/中文名称/英文品牌/规格型号"
                    v-model="search.info"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="" prop="auditAble">
                  <el-select
                    clearable
                    v-model="search.auditAble"
                    placeholder="是否审核"
                    style="width: 100px"
                  >
                    <el-option label="是" :value="true"></el-option>
                    <el-option label="否" :value="false"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" prop="enable">
                  <el-select
                    clearable
                    v-model="search.enable"
                    placeholder="是否启用"
                    style="width: 100px"
                  >
                    <el-option label="是" :value="true"></el-option>
                    <el-option label="否" :value="false"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="创建时间" prop="time">
                  <el-date-picker
                    v-model="search.time"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="" prop="query_batchId">
                  <el-button type="primary" round @click="searchPage">搜索</el-button>
                  <el-button
                    type="warning"
                    round
                    @click="$refs.search.resetFields()">重置</el-button>
                </el-form-item>
              </el-form>
              <div style="margin-bottom: 10px;min-width: 100px;text-align: right" class="storeColor">
                <el-button
                  class="storeColor"
                  type="text"
                  v-if="productType"
                  style="font-size: 14px;"
                >{{ productType.typeName }}</el-button>
                <span v-else>全部商品</span>
              </div>
            </div>
            <!-- 列表区 -->
            <div style="flex: 1">
              <el-table
                height="100%"
                :data="data"
                border
                stripe
                highlight-current-row
                ref="multipleTable"
                @row-dblclick="handleRowDbclick"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="index" width="55" align="center">
                </el-table-column>
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column label="SKU编码" prop="skuCode">
                  <template slot-scope="scope">
                    <div class="tdItem">
                      {{scope.row.skuCode}}
                    </div>
                    <div class="tdItem">
                      库存：{{scope.row.inventory || 0}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="自购商品名称" sortable prop="chineseBrand">
                  <template slot-scope="scope">
                    <el-link @click="handleRowDbclick(scope.row)">{{ scope.row.goodsName }}</el-link>
                  </template>
                </el-table-column>
                <el-table-column label="英文品牌" sortable prop="englishBrand"></el-table-column>
                <el-table-column label="规格型号" prop="specification"></el-table-column>
                <el-table-column label="分类" prop="goodsTypeName"></el-table-column>
                <el-table-column label="单位" prop="measureUnit"></el-table-column>
                <el-table-column label="销售单价" sortable prop="price"></el-table-column>
                <el-table-column label="审核" prop="auditAble" sortable align="center" width="100">
                  <template slot-scope="scope">
                    <span style="font-size: 20px">
                      <i
                        class="el-icon-circle-check"
                        style="color: #67c23a"
                        v-if="scope.row.auditAble"
                      ></i>
                      <i
                        class="el-icon-circle-close"
                        style="color: #f56c6c"
                        v-else
                      ></i>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="启用" prop="enabled" sortable align="center" width="100">
                  <template slot-scope="scope">
                    <span style="font-size: 20px">
                      <i
                        class="el-icon-circle-check"
                        style="color: #67c23a"
                        v-if="scope.row.enabled"
                      ></i>
                      <i
                        class="el-icon-circle-close"
                        style="color: #f56c6c"
                        v-else
                      ></i>
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 分页区 -->
            <div style="margin-top: 10px">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 100, 200, 500, 1000]"
                :page-size="pageSize"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 添加自购商品信息 -->
    <el-dialog
      :title="title + '自购商品'"
      :visible.sync="dialogFormVisible"
      v-dialog-drag
      :close-on-click-modal="false"
      @close="restForm"
    >
      <div style="position: relative">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="基本信息" name="selfbuygoodsForm">
            <el-form
              size="small"
              :model="selfbuygoodsForm"
              label-position="left"
              label-width="120px"
              ref="selfbuygoodsForm"
              :rules="goodsRules"
            >
              <el-row :gutter="20">

                <el-col :span="16">
                  <el-form-item prop="goodsType" label="商品类型">
                    <el-cascader
                      ref="cascader"
                      :options="selfbuygoodsOptions.goodsType"
                      :props="optionProps"
                      clearable
                      style="width: 100%"
                      v-model="selfbuygoodsForm.goodsType"
                      :show-all-levels="false"
                      @change="handleGoodsTypeChange"
                    ></el-cascader>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="skuCode" label="SKU编码">
                    <el-input v-model="selfbuygoodsForm.skuCode"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="16">
                  <el-form-item prop="goodsName" label="中文名称">
                    <el-input v-model="selfbuygoodsForm.goodsName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="englishBrand" label="英文品牌">
                    <el-input v-model="selfbuygoodsForm.englishBrand"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item prop="price" label="销售单价">
                    <el-input v-model="selfbuygoodsForm.price"  ></el-input>
                  </el-form-item>
                  <el-form-item prop="specification" label="规格型号">
                    <el-input v-model="selfbuygoodsForm.specification"></el-input>
                  </el-form-item>

                </el-col>
                <el-col :span="8">
                  <el-form-item prop="measureUnit" label="计量单位">
                    <el-select
                      filterable
                      style="width: 100%"
                      v-model="selfbuygoodsForm.measureUnit"
                      placeholder="请选择计量单位">
                      <el-option
                        v-for="item in measuringUnit"
                        :key="item"
                        :value="item"
                        :label="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item prop="material" label="材质">
                    <el-input v-model="selfbuygoodsForm.material"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="chineseBrand" label="中文品牌">
                    <el-input v-model="selfbuygoodsForm.chineseBrand"></el-input>
                  </el-form-item>
                  <el-form-item prop="originPlace" label="产地">
                    <el-select
                      filterable
                      style="width: 100%"
                      v-model="selfbuygoodsForm.originPlace"
                      placeholder="请选择产地">
                      <el-option
                        v-for="item in originPlace"
                        :key="item"
                        :value="item"
                        :label="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item prop="weight" label="重量">
                    <el-input v-model="selfbuygoodsForm.weight"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="customsCode" label="海关编码">
                    <el-input v-model="selfbuygoodsForm.customsCode"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="customsPrice" label="海关申报单价">
                    <el-input v-model="selfbuygoodsForm.customsPrice"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row :gutter="20">
                <el-col :span="8">
                  <span>库存：{{selfbuygoodsForm.inventory}}</span>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="商品图片" name="goodsImage">
            <upload-image ref="uploadImage" :images="selfbuygoodsForm.goodsImages"></upload-image>
          </el-tab-pane>
          <el-tab-pane label="详细内容" name="detail">
            <editor ref="editor"></editor>
          </el-tab-pane>
        </el-tabs>
        <div style="position: absolute; top: 5px; right: 0">
          <el-checkbox v-model="selfbuygoodsForm.auditAble">是否审核</el-checkbox>
          <el-checkbox v-model="selfbuygoodsForm.enabled">启用</el-checkbox>
          <el-button
            v-if="title!='查看'"
            type="primary"
            style="margin-left: 10px"
            @click="submit"
            v-repeatClick>
            <i class="fa fa-floppy-o" style="margin-right: 10px" ></i>
            保存商品</el-button>
        </div>
      </div>
    </el-dialog>

    <!---批量操作商品----->
    <upload-excel :visible.sync="dialogFormVisible1" :upload-fun="selfGoodsOperation" :down-fun="getSelfGoodsTemplate" title="自购商品"></upload-excel>
  </div>
</template>

<script>
let search = {
  //搜索:SUK编码/中文名称/英文品牌/规格型号
  info: "",
  //是否审核
  auditAble: "",
  //是否启用
  enable: "",
  //创建时间
  time: "",//开始时间startDate，结束时间endDate
};


import myHeader from "@/components/pageHEader/pageHeader";
import leftSide from "../components/leftSide";
import editor from '../components/editor'
import uploadImage from '../components/uploadImage'
import uploadExcel from '../components/uploadExcel'
import {goodsMixins} from '../components/mixins'

import {
  getSelfbuygoods,
  addSelfbuygoods,
  modSelfbuygoods,
  delSelfbuygoods,
  disableOrEnableSelfbuygoods,
  getSelfGoodsTemplate,
  selfGoodsOperation,
  getSelfbuygoodsById
} from "@/api/parts/mailfree/selfbuygoods";
import { mapGetters } from "vuex";
export default {
  name: 'helpgoods',
  components:{
    myHeader,
    leftSide,
    uploadImage,
    editor,
    uploadExcel
  },
  data(){
    return{
      pageSize: 20,
      currentPage: 1,
      total: 0,
      data:[],
      //表格选中
      multipleSelection: [],
      //搜索
      search: this.cloneObj(search),
      activeName: "selfbuygoodsForm",
      //选中产品类型
      productType: "",
      //自购商品对话框
      dialogFormVisible: false,
      title: "添加",
      selfbuygoodsForm:{},
      node:{},
      selfbuygoodsOptions: {
        goodsType:[],
      },
      //批量操作商品
      dialogFormVisible1:false,
      getSelfGoodsTemplate,
      selfGoodsOperation
    }
  },
  computed: {
    ...mapGetters(["stores"]),
  },
  mixins:[goodsMixins],
  mounted() {
    this.getSelfbuyGoods()
    this.selfbuygoodsForm = this.cloneObj(this.goodsForm)
  },
  methods:{
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getSelfbuyGoods();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getSelfbuyGoods();
    },
    //获取商品分类信息
    handleCascadeList(val){
      this.selfbuygoodsOptions.goodsType = val
    },
    //点击tree树图
    handleNodeClick(data,node) {
      this.productType = data;
      this.getSelfbuyGoods()
    },
    handleBeforeUpdate(){
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      if (this.multipleSelection.length > 1) {
        this.tip("只能勾选表格中的一条数据");
        return;
      }
      this.handleAddUpdate(this.multipleSelection[0])
    },
    //添加/修改
    handleAddUpdate(row){
      this.activeName = "selfbuygoodsForm";
      //修改处理
      if (row){
        this.title = "修改";
        getSelfbuygoodsById(row.id).then(resp=>{
          let row = resp.data
          //将数据复制给form
          this.handleModform(row, this.selfbuygoodsForm);
          if(!this.selfbuygoodsForm.goodsImages){
            this.selfbuygoodsForm.goodsImages = []
          }
          this.$nextTick(()=>{
            this.$refs.editor.setContent(row.note)
          })
          this.selfbuygoodsForm.id = row.id;
          this.dialogFormVisible = true;
        })
      }else{
        this.dialogFormVisible1 = true;
        this.title = "批量操作";
      }
    },
    //查看
    selfbuyGoodsView(){
      this.handleBeforeUpdate();
      this.title = '查看'
    },
    //刷新
    getSelfbuyGoods(){
      let query = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        auditAble: this.search.auditAble,
        goodsType:this.productType && this.productType.id,
        enable: this.search.enable,
        info: this.search.info,
        ...this.handleDate(this.search.time)
      }
      getSelfbuygoods(query).then(resp=>{
        this.data = resp.data.records
        this.total = resp.data.total
      })
    },
    //搜索
    searchPage(){
      this.currentPage = 1
      this.pageSize = 20
      this.getSelfbuyGoods()
    },
    //表格双击修改
    handleRowDbclick(row) {
      this.handleAddUpdate(row);
    },
    //选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //重置表单信息
    restForm() {
      this.$nextTick(() => {
        if (this.$refs.selfbuygoodsForm) this.$refs.selfbuygoodsForm.resetFields();
      });
    },
    //添加自购商品确认按钮
    submit(){
      this.$refs['selfbuygoodsForm'].validate((valid) => {
        if (valid) {
          this.selfbuygoodsForm.note = this.$refs.editor.getContent();
          let submit = Object.assign(
            this.selfbuygoodsForm,
          );

          let request;
          if (this.title == '添加') {
            request = addSelfbuygoods(submit);
          } else {
            request = modSelfbuygoods(submit);
          }
          request.then((resp) => {
            this.$message.success(resp.message || '成功');
            this.dialogFormVisible = false;
            this.getSelfbuyGoods();
          });
        }else {
          this.activeName = "selfbuygoodsForm";
        }
      })
    },
    //启用或禁用
    enabled(enabled) {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      let ids = this.multipleSelection.map((item) => item.id);
      let tip;
      if (enabled) {
        tip = "此操作将启用自购商品, 是否继续?";
      } else {
        tip = "此操作将禁用自购商品, 是否继续?";
      }
      this.confirm(tip).then(() => {
        disableOrEnableSelfbuygoods(ids,{enabled}).then((resp) => {
          this.$message.success(resp.message || "成功");
          this.getSelfbuyGoods();
        });
      });
    },
    //删除自购商品信息
    delSelfbuyGoods() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      this.confirm().then(() => {
        delSelfbuygoods(this.multipleSelection.map((item) => item.id)).then(
          (resp) => {
            this.$message.success(resp.message || "成功");
            this.getSelfbuyGoods();
          }
        );
      });
    },
    //选择商品类型
    handleGoodsTypeChange(val){
      this.$nextTick(() => {
        let node = this.$refs.cascader.getCheckedNodes()
        this.selfbuygoodsForm.goodsTypeName = node[0].label//商品类型名称
        this.selfbuygoodsForm.goodsType = node[0].value//商品类型ID
      })
    },
    //选择仓库名称
    handleStoreChange(val){
      this.stores.forEach(item=>{
        if (val==item.id){
          this.selfbuygoodsForm.storeName = item.name
        }
      })
    },

  },
  watch: {
    dialogFormVisible1(val){
      if(!val){
        this.getSelfbuyGoods()
      }
    }
  },
}
</script>

<style scoped lang="scss">

</style>
